<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>caidan</title>
    <style>
        .s1 {
    list-style: none;
    font-size: 30px;
    float: left;
    margin-left: 20px;
    position: relative; /* 为了让绝对定位的二级菜单相对于一级菜单定位 */
}

a {
    text-decoration: none;
    color: black;   
    
}

.submenu {
    display: none;
    position: absolute;
    top: 100%; /* 让二级菜单出现在一级菜单的下方 */
    left: 10px;
    padding: 0;
    margin: 0;
}

a:hover{
            color:red;
            background-color: bisque;
        }
.s2:hover + .submenu,
.submenu:hover {
    display: block; /* 当悬停在一级菜单项或二级菜单上时显示二级菜单 */
}
    </style>
</head>
<body>
    <ul>
        <li class="s1">
            <a class="s2" href=" ">咖啡</a >
            <ul class="submenu">
                <li><a href=# target="_blank">橙C美式</a></li>
                <li><a href=# target="_blank">冰拿铁</a></li>
                <li><a href=# target="_blank">咖啡哪有人生苦</a></li>
            </ul>
        </li>
        <li class="s1">
            <a class="s2" href="#">果茶</a >
            <ul class="submenu">
                <li><a href=# target="_blank">蜜桃四季春</a></li>
                <li><a href=# target="_blank">棒打县城</a></li>
                <li><a href=# target="_blank">草莓啵啵</a></li>
            </ul>
        </li>
        <li class="s1">
            <a class="s2" href="#">奶茶</a >
            <ul class="submenu">
                <li><a href=# target="_blank">珍珠奶茶</a></li>
                <li><a href=# target="_blank">椰果奶茶</a></li>
                <li><a href=# target="_blank">芋泥啵啵只要啵啵奶茶</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>